<template>
  <section class="route">
    <SwiperBanner show-introduce="0" :slides="slides"/>
		<div class="route-info wrapper clear-float">
			<div class="float-left route-map img-link"><img :src="map" alt=""></div>
			<div class="float-right info-msg">
				<div class="info-header">
					<h4 class="fleet-name text-red">{{fleetPost.title}}</h4>
					<h3 class="route-name">{{title}}</h3>
					<ul class="route-msg">
						<!-- <li><span><b>预订代码：</b>{{code}}</span></li> -->
						<li><span><b>始发地：</b>{{departure}}</span><span><b>行程天数：</b>{{days}}</span></li>
						<li><span><b>出发日期：</b>{{beginDate}}</span></li>
						<li><span><b>乘搭游轮：</b><nuxt-link class="msg-fleet-name" :to="/fleet/+fleetPost.id">{{fleetPost.post_name}}</nuxt-link></span></li>
					</ul>
				</div> 
				<div class="info-body">
					<div class="detail" v-html="content"></div>
					<h4 class="highlights-title" v-if="highlight.length>0">体验亮点</h4>
					<ul class="route-highlights" v-if="highlight.length>0"> 
						<li v-for="(item, index) in highlight" :key="index">{{item}}</li>
					</ul>
				</div>
				<div class="info-footer clear-float">
					<a class="booking-link content-btn">我要咨询</a>
				</div>
			</div>
		</div>
		<div class="com-switch route-detail">
			<div class="wrapper wrapper-fixed">
				<ul class="switch-nav clear-float">
					<li class="nav-item"
						v-for="(nav, index) in switchNav"
						:key="index"
						:class="{'nav-item-active':index==activeNavIndex}"
						@click="switchContent(index)">
						<i class="iconfont" :class="nav.iconNmae"></i><span>{{nav.title}}</span>
					</li>
				</ul>
				<div class="switch-content">
					<div class="content-item trip" :class="{'content-item-show': switchNav[activeNavIndex].role == 'routes'}">
						<h3>{{switchNav[0].title}}</h3>
						<div v-for="(row, index) in routes" :key="index">
							<div class="trip-item trip-item-img" v-if="row.route_image">
								<div class="img-box">
									<img :src="row.route_image" alt="">
									<div class="day-tip">{{row.route_title}}</div>
								</div>
								<div class="text-area">
									<h3>{{row.place}}</h3>
									<div v-html="row.route_excerpt"></div>
								</div>
							</div>
							<div class="trip-item" v-if="!row.route_image">
								<div class="day-tip">{{row.route_title}}</div>
								<h3 class="day-name">{{row.place}}</h3>
								<div v-html="row.route_excerpt"></div>
							</div>
						</div>
					</div>
					<div class="content-item" :class="{'content-item-show': switchNav[activeNavIndex].role == 'experience'}">
						<h3>{{switchNav[1].title}}</h3>
						<ExperienceList :experience="experience"/>
					</div>
					<div class="content-item" :class="{'content-item-show': switchNav[activeNavIndex].role == 'landing'}">
						<h3>{{switchNav[2].title}}</h3>
						<div v-html="landing"></div>
					</div>
					<div class="content-item"  :class="{'content-item-show': switchNav[activeNavIndex].role == 'visa'}">
						<h3>{{switchNav[3].title}}</h3>
						<div v-html="visa"></div>
					</div>
				</div>
			</div>
		</div>
  </section>
</template>
<script>
import axios from 'axios'
import SwiperBanner from '~/components/SwiperBanner.vue'
import ExperienceList from '~/components/ExperienceList.vue'
export default {
  data () {
    return {
      switchNav: [
        {
          id: 0,
          role: 'routes',
          iconNmae: 'icon-kecheng',
          title: '行程详情'
        },
        {
          id: 1,
          role: 'experience',
          iconNmae: 'icon-start',
          title: '短途体验'
        },
        {
          id: 2,
          role: 'landing',
          iconNmae: 'icon-mao',
          title: '备选登陆点'
        },
        {
          id: 3,
          role: 'visa',
          iconNmae: 'icon-qianzheng',
          title: '签证信息'
        }
      ],
      activeNavIndex: 0
    }
  },
  asyncData ({ params, error }) {
    return axios.get(`http://hurtigruten.cn/api/mag.route.get.json?id=${params.id}`)
      .then((res) => {
        const route = res.data.route
        return {
          title: route.title,
          map: route.map,
          code: route.code,
          days: route.days,
          departure: route.departure,
          beginDate: route.begin_date,
          content: route.content,
          slides: route.sliders,
          fleetPost: route.fleet_posts[0],
          highlight: route.highlight,
          routes: route.routes,
          experience: route.experience_posts,
          landing: route.route_landing,
          visa: route.visa_info
        }
      })
      .catch((e) => {
        console.log('e', e)
        error({ statusCode: 404, message: 'Post not found' })
      })
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'keywords', name: 'keywords', content: '海达路德游轮，海达路德极地游轮，极地探险，探险游轮，游轮旅游' },
        { hid: 'description', name: 'description', content: '海达路德经过125年的历史沉淀，成为全球游轮探险旅行领军者，与海达路德同行没有观光客，只有探险家。海达路德以打造亲身体验独一无二的海上航行为愿景，是海达路德的品牌精髓，这些都源自海达路德125年来历史悠久的遗传基因。' }
      ]
    }
  },
  components: {
    SwiperBanner,
    ExperienceList
  },
  methods: {
    switchContent: function (index) {
      this.activeNavIndex = index
    }
  }
}
</script>
<style lang="less">
@import "~assets/css/variable.less";
@import "~assets/css/mixins.less";
@import 'assets/css/route.css';
.com-switch{
	.switch-nav{
		background-color:@red;
		.nav-item{
			position:relative;
			background-color:#bdbdbd;
			float:left;
			color:#fff;
			text-align:center;
			cursor:pointer;
			i{
				font-size:52px;
				display:block;
			}
			&::before{
				@size:10px;
				content:'';
				display:none;
				width:0;
				height:0;
				border:@size solid transparent;
				border-bottom-color:#fff;
				position:absolute;
				bottom:0;
				left:50%;
				margin-left:-@size;
			}
			&.nav-item-active{
				background-color:@red;
				&::before{display:block;}
			}
		}
	}
	.switch-content{
		.content-item{
			display:none;
			&.content-item-show{display:block;}
		}
	}
	@media screen and (max-width:768px){
		.switch-nav{
			.nav-item{
				&::before{
					@size:10*@rpx;
					border:@size solid transparent;
					border-bottom-color:#fff;
					margin-left:-@size;
				}
			}
		}
	}
}
</style>
